<template>
    <div id="app">
        <div class="page">
            <div class="aside">
                <div class="logo">
                    <img src="./assets/logo.svg" alt="">
                    <strong style="color: #fff">指令集</strong>
                </div>
                <div class="nav" :class="{active: $route.path==='/basis'}">
                    <router-link to="/basis" class="item">基础服务接口服务</router-link>
                </div>
                <div class="nav" :class="{active: $route.path==='/authority'}">
                    <router-link to="/authority" class="item">权限管理接口服务</router-link>
                </div>
            </div>
            <div class="main">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>


    export default {
        name: 'App',
        data() {
            return {
                page: {}
            }
        }

    }
</script>

<style>
    body {
        margin: 0;
        padding: 0;
    }

    .page {
        display: flex;
        height: 100vh;
        width: 100%;
        font-size: 10px;
    }

    .aside {
        width: 200px;
        height: 100%;
        flex-shrink: 0;
        background-color: #24252c;
    }

    .main {
        height: 100%;
        overflow-y: auto;
    }

    .logo {
        margin-top: 24px;
        margin-bottom: 12px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo img {
        margin-right: 16px;
    }

    .nav {
        border-radius: 4px;
        padding: 8px;
        margin: 4px 8px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        transition: 0.3s;
    }

    .nav:hover, .nav.active {
        background-color: #ffffff33;
    }

    .nav a:-webkit-any-link {
        color: white;
        text-decoration: none;
    }

    .example-container {
        display: flex;
        flex-wrap: wrap;
    }

    .example-container .card {
        width: 100%;
        margin: 24px;
        padding: 16px;
        display: flex;
        border-radius: 4px;
        border: 1px solid #ddd;
        flex-direction: column;
        color: #666;
    }

    .example-container .card .title {
        font-weight: 600;
        font-size: 16px;
    }

    .example-container .card div {
        margin-bottom: 16px;
        display: flex;
    }

    .example-container .card div span {
        display: inline-block;
        padding: 4px;
        width: 120px;
    }

    .example-container .card div input[type='search'] {
        font-size: 10px;
        outline: none;
        padding: 4px;
        border: 1px solid #dddddd;
    }

    .example-container button {
        padding: 8px 16px;
        background-color: #04acff;
        color: white;
        border-radius: 4px;
        border: none;
        outline: none;
        cursor: pointer;
    }

    .example-container textarea {
        height: 200px;
        width: 400px;
        margin-top: 8px;
        padding: 8px;
        background-color: rgba(0, 0, 0, 0.08);
        border: 0;
        outline: none;
        border-radius: 4px;
    }
</style>
